<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			#box{
				width: 600px;
				margin: 50px auto;
				border: 1px solid #CCCCCC;	
				padding: 20px;			
			}
			#box .bar input{
				height: 30px;
				width: 200px;
				text-indent: 30px;
			}
			#box .bar button{
				height: 34px;
				width: 54px;
			}
			#box .con {
				padding: 10PX 0;
			}
			#box .con p{
			padding: 5px 0;
			text-indent: 30px;
			}
			#box .con p span{
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="bar">
				<input type="text" placeholder="搜索内容" />
				<button type="button">搜索</button>
				<input type="text" placeholder="替换内容" />
				<button type="button">替换</button>
			</div>
			<div class="con">
				<p>
                                                 张家界是湖南省辖地级市，原名大庸市，辖2个市辖区（永定区、武陵源区）、2个县（慈利县、桑植县）。位于湖南西北部，澧水中上游，属武陵山区腹地。[1]  张家界因旅游建市，是中国最重要的旅游城市之一，是湘鄂渝黔革命根据地的发源地和中心区域。
				</p>
				<p>
					1982年9月，张家界国家森林公园成为中国第一个国家森林公园。
				</p>
				<p>
					1988年8月，张家界武陵源风景名胜区被列入国家重点风景名胜区；1992年，由张家界国家森林公园等三大景区构成的武陵源风景名胜区被联合国教科文组织列入《世界自然遗产名录》；2004年2月，被列入全球首批《世界地质公园》；2007年，被列入中国首批国家5A级旅游景区。[2]
				</p>
			</div>
		</div>
		<script>
			var aCon = document.querySelector('.con');
			var aInput = document.getElementsByTagName("input");
			var aBut = document.getElementsByTagName('button');
			var Text = aCon.innerHTML; 
			//console.log(aCon.innerHTML)
			aBut[0].onclick = function(){
				var val0 = aInput[0].value;
				if (val0) {
					var arrT = Text.split(val0);
					aCon.innerHTML = arrT.join('<span>'+val0+'</span>');
				}
			}
			
			aBut[1].onclick = function(){
				var val1 = aInput[1].value;
				var val0 = aInput[0].value;
				if (val1&&val0) {
					var arrt = Text.split(val0);
					aCon.innerHTML = arrt.join('<span>'+val1+'</span>');
				}
			}
		</script>
	</body>
</html>
